vue使用xlsx导出excel

2023-11-08 09:13| 来源: 网络整理| 查看: 265

vue导出excel

1.引入依赖：npm install [email protected] [email protected] --save

注：xlsx要指定版本不然会报错

2.封装导出的js文件

import fs from 'file-saver' import XLSX from 'xlsx' export function xlsx(json, fields, filename = '.xlsx') {//导出xlsx json.forEach(item => { for (let i in item) { if (fields.hasOwnProperty(i)) { item[fields[i]] = item[i]; } delete item[i]; //删除原先的对象属性 } }) let sheetName = filename //excel的文件名称 let wb = XLSX.utils.book_new() //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。 let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //将JS对象数组转换为工作表。 wb.SheetNames.push(sheetName) wb.Sheets[sheetName] = ws const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//设置表格的样式 let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false } //写入的样式 let wbout = XLSX.write(wb, wopts) let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' }) fs.saveAs(blob, filename + '.xlsx') } const s2ab = s => { var buf; if (typeof ArrayBuffer !== 'undefined') { buf = new ArrayBuffer(s.length) var view = new Uint8Array(buf) for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff return buf } else { buf = new Array(s.length); for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF; return buf; } }

3.在用导出的文件里引入xlsx.js文件

导出excel import {xlsx} from './utils/xlsx' export default { data() { return { jsonData:[{ id:'1', name:'小智', age:18, classes:'商学院' }, { id:'2', name:'小白', age:19, classes:'商学院' }, { id:'3', name:'小蓝', age:12, classes:'商学院' }, { id:'4', name:'小花', age:14, classes:'商学院' }, { id:'5', name:'小粉', age:15, classes:'商学院' }, { id:'6', name:'小黄', age:16, classes:'商学院' }, { id:'7', name:'小红', age:17, classes:'商学院' }, { id:'8', name:'小黑', age:19, classes:'商学院' }, ], listHander:{ id:'学号', name:'姓名', age:'年龄', classes:'学院' } } }, methods: { outExcel(){ // this.jsonData是要导出的数据内容（表格里的内容）， // this.listHander对应要导出内容的表头 // 学生：指向的是excel文件名 xlsx(this.jsonData,this.listHander,'学生') } }, }

文章摘抄于https://blog.csdn.net/qq_31539817/article/details/117913308?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&utm_relevant_index=2

【本文地址】

公司简介

联系我们